<template>
	<view class="container">
		<view class="user-section">
			<!-- <image class="bg" src="/static/bj.jpg"></image> -->
			<view class="user-info-box">
				<view class="member-top-c">
					<template v-if="hasLogin">
						<image class='portrait' mode="aspectFill" :src='userDetailInfo.icon'></image>
						<view class='user-name' style="text-align: center;font-size: 30rpx;">{{ userDetailInfo.nickname }}</view>
					</template>
					<template v-else>
						<!-- #ifdef MP-WEIXIN -->
						<view class="portrait">
							<image :src="userDetailInfo.icon" mode="aspectFill"></image>
							<!-- <open-data type="userAvatarUrl"></open-data> -->
						</view>
						<view>
							<button class="login-btn" @click="toLogin()">授权登录</button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<view class="portrait"></view>
						<view>
							<button class="login-btn" @click="toLogin()">授权登录</button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view class="portrait"></view>
						<view>
							<button class="login-btn" @click="toLogin()">授权登录</button>
						</view>
						<!-- #endif -->
					</template>
				</view>
			</view>
		</view>

		<view class="cover-container">
			<!-- 浏览历史 -->
			<view class="history-section icon">
				<list-cell icon="icon-gouwuche" iconColor="#5d5b62" title="我的订单" @eventClick="switchTo('/pages/order/coachOrder')"></list-cell>
				<list-cell icon="icon-daifukuan" iconColor="#5d5b62" title="美团核销" @eventClick="navTo('/pages/meituan/hexiao')"></list-cell>
				<list-cell icon="icon-shoucang" iconColor="#5d5b62" title="抖音核销" @eventClick="navTo('/pages/douyin/hexiao')"></list-cell>
				<list-cell icon="icon-shezhi1" iconColor="#5d5b62" title="设置" border="" @eventClick="navTo('/pages/set/set')"></list-cell>
			<view class='copyright'><text>本系统由<text style="font-family: 'Courier New', Courier, monospace;font-weight: 600;color: #55aaff;" @click="toZhaoshang()">长沙轻时光</text>提供产品及技术支持</text></view>
			</view>
		</view>
		<!-- #ifdef MP-TOUTIAO -->
		<view class="contact-content">
			<button size="default" type="primary" open-type="contact">联系客服</button>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
import Api from '@/common/api';
import listCell from '@/components/mix-list-cell';
import { mapState } from 'vuex';
export default {
	components: {
		listCell
	},
	data() {
		return {
			userDetailInfo: {},
			currentCoachId: null,
			role: '0' //0:学员 1:教练
		};
	},
	async onShow() {
		console.log("onshow========" + this.hasLogin);
		if (this.hasLogin) {
			let params = {
				memberId: this.userInfo.userInfo.id
			};
			let data1 = await Api.apiCall('get', Api.index.userInfo, params);
			this.userDetailInfo = data1.member;
			console.log(this.userDetailInfo);
			this.currentCoachId = this.userInfo.userInfo.coachId;
		}
	},
	async onLoad() {
		console.log("onLoad========" + this.hasLogin);
		if (this.hasLogin) {
			console.log(this.userInfo.userInfo);
			let username = this.userInfo.userInfo.username;
			console.log('用户名' + username);
			let params = {
				memberId: this.userInfo.userInfo.id
			};
			let data1 = await Api.apiCall('get', Api.index.userInfo, params);
			console.log(data1);
			this.userDetailInfo = data1.member;
			this.currentCoachId = this.userInfo.userInfo.coachId;
			let coachId = this.userInfo.userInfo.coachId;
			if (coachId > 0) {
				this.role = 1;
			}
			console.log(this.role)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		toBuyVip() {
			uni.navigateTo({
				url: '/pages/user/vip/buyvip?pushId=0'
			});
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.hasLogin) {
				url = '/pages/public/login';
				return false;
			}
			uni.navigateTo({
				url: url
			});
		},
		switchTo(url) {
			if (!this.hasLogin) {
				url = '/pages/public/login';
			}
			uni.switchTab({
				url: url
			});
		},
		rediTo(url) {
			if (!this.hasLogin) {
				url = '/pages/public/login';
			}
			uni.redirectTo({
				url: url
			});
		},
		toLogin() {
			uni.redirectTo({
				url: '/pages/public/login'
			});
		}
	}
};
</script>
<style lang="scss">
	.user-remainder{
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 1.8;
	}
.member-top-c {
	margin: 0 auto;
}

.user-name {
	line-height: 1;
	font-size: 26rpx;
	color: #ffffff;
}

%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}

.user-section {
	background-color: #1296db;
	height: 300upx;
	position: relative;
	box-sizing: border-box;
	padding: 55upx 30upx;

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}

.retailtit {
	width: 100%;
	height: 60upx;
	line-height: 40upx;
	font-size: 32upx;
	font-weight: bold;
	color: #333;
}

.retaillist {
	display: flex;
	width: 100%;
	border-bottom: 1upx solid #f6f6f6;
	text-align: center;
	padding-bottom: 20upx;
	margin-bottom: 20upx;
}

.retaillist:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.retaileach {
	flex: 1;
}

.retailtxt {
	font-size: 26upx;
	color: #949494;
	line-height: 50upx;
}

.retailname {
	font-size: 36upx;
	color: #e61a0f;
	font-weight: bold;
}

.retailtitle {
	font-size: 30upx;
	color: #333;
}

.user-info-box {
	height: 190upx;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	margin: 0 auto;

	.portrait {
		width: 140upx;
		height: 140upx;
		border: 5upx solid #fff;
		border-radius: 50%;
		margin: 0 auto 20upx;
		display: block;

		image {
			width: 130upx;
			height: 130upx;
			border-radius: 50%;
		}
	}

	.username {
		font-size: $font-lg + 6upx;
		color: $font-color-dark;
		margin-left: 20upx;
	}
}

.login-btn {
	color: #333;
	width: 180upx;
	height: 50upx;
	line-height: 50upx;
	border-radius: 25upx;
	background: #ffffff;
	font-size: 12px;
}

.vip-card-box {
	display: flex;
	flex-direction: column;
	color: #f7d680;
	height: 240upx;
	background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
	border-radius: 16upx 16upx 0 0;
	overflow: hidden;
	position: relative;
	padding: 20upx 24upx;

	.card-bg {
		position: absolute;
		top: 20upx;
		right: 0;
		width: 380upx;
		height: 260upx;
	}

	.b-btn {
		position: absolute;
		right: 20upx;
		top: 16upx;
		width: 132upx;
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		color: #36343c;
		border-radius: 20px;
		background: linear-gradient(left, #f9e6af, #ffd465);
		z-index: 1;
	}

	.tit {
		font-size: $font-base + 2upx;
		color: #f7d680;
		margin-bottom: 28upx;

		.yticon {
			color: #f6e5a3;
			margin-right: 16upx;
		}
	}

	.e-b {
		font-size: $font-sm;
		color: #d8cba9;
		margin-top: 10upx;
	}
}

.cover-container {
	background: $page-color-base;
	padding: 30upx 30upx;
	position: relative;
	background: #f5f5f5;

	.arc {
		position: absolute;
		left: 0;
		top: -34upx;
		width: 100%;
		height: 36upx;
	}
}

.tj-sction {
	@extend %section;

	.tj-item {
		@extend %flex-center;
		flex-direction: column;
		height: 140upx;
		font-size: $font-sm;
		color: #75787d;
	}

	.num {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 8upx;
	}
}

.order-section {
	@extend %section;
	padding: 28upx 0;
	margin-top: 20upx;

	.order-item {
		@extend %flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		font-size: $font-sm;
		color: $font-color-dark;
	}

	.yticon {
		font-size: 48upx;
		margin-bottom: 18upx;
		color: #e61a0f;
	}

	.icon-shouhoutuikuan {
		font-size: 44upx;
	}
}

.history-section {
	background: #fff;
	border-radius: 10upx;

	.sec-header {
		display: flex;
		align-items: center;
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 40upx;
		margin-left: 30upx;

		.yticon {
			font-size: 44upx;
			color: #5eba8f;
			margin-right: 16upx;
			line-height: 40upx;
		}
	}

	.h-list {
		white-space: nowrap;
		padding: 30upx 30upx 0;

		image {
			display: inline-block;
			width: 160upx;
			height: 160upx;
			margin-right: 20upx;
			border-radius: 10upx;
		}
	}
}

.contact-content{
	background: #f5f5f5;
	margin-top: 20rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.copyright{
		font-size: 25rpx;
		color: #999999;
		text-align: center;
		left: 0;
		letter-spacing: 2rpx;
		right: 0;
		position: fixed;
		bottom: 10rpx;
		}
</style>
